var mapa;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();

$( document ).on( "pageshow", "#map-page", function( event ) {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(-24.282197, -57);

  directionsDisplay.setMap(mapa);
  var start = new google.maps.LatLng(-25.0, -57.0);
  var end = new google.maps.LatLng(-25.282197, -57.6350999);
  var request = {
   origin: start,
  destination: end,
    travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
	directionsDisplay.setPanel(document.getElementById("directions"));
      directionsDisplay.setDirections(result);
    }
  });
});

$( document ).on( "pagecreate", "#map-page", function() {
    var defaultLatLng = new google.maps.LatLng(-25.30066, -57.63591);  // Default to Hollywood, CA when no geolocation support
    if ( navigator.geolocation ) {
        function success(pos) {
            // Location found, show map with these coordinates
            drawMap(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
        }
        function fail(error) {
            drawMap(defaultLatLng);  // Failed to find location, show default map
        }
        // Find the users current position.  Cache the location for 5 minutes, timeout after 6 seconds
        navigator.geolocation.getCurrentPosition(success, fail, {maximumAge: 500000, enableHighAccuracy:true, timeout: 6000});
    } else {
        drawMap(defaultLatLng);  // No geolocation support, show default map
    }
    function drawMap(latlng) {
        var myOptions = {
            zoom: 13,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
	var icono = 'img/iconMarker.png';
	$.ajax({
		url: "http://barreras.altervista.org/tlista.php",

		data: {
		id: 123
		},

		type: "GET",

		dataType : "json",

		success: function( jsonRespuesta ) {
			// Add an overlay to the map of current lat/lng
		    var json = JSON.parse(jsonRespuesta);
			for(var k in json.sucursales){

				var marker = new google.maps.Marker({
				    position: new google.maps.LatLng(json.sucursales[k].latitud, json.sucursales[k].longitud),
				    map: map,
				    icon: icono,
				    title: json.sucursales[k].descripcion
				});

				var contentString = '<div id="content">'+
				      '<div id="siteNotice">'+
				      '</div>'+
				      '<h1 id="firstHeading" class="firstHeading">'+json.sucursales[k].titulo+'</h1>'+
				      '<div id="bodyContent">'+
				      '<p>'+json.sucursales[k].descripcion+'</p>'+
				      '</div>'+
				      '</div>';

				  marker.info = new google.maps.InfoWindow({
				      content: contentString
				  });

				  google.maps.event.addListener(marker, 'click', function() {
				    this.info.open(map,this);
				  });
			}


		},

		error: function( xhr, status, errorThrown ) {
		alert( "Sorry, there was a problem!" );
		console.log( "Error: " + errorThrown );
		console.log( "Status: " + status );
		console.dir( xhr );
		}
	});

    };

	
});

